<template>
	<LabelComponent v-if="componentModel.type=='label'" :componentModel="componentModel">
	</LabelComponent>
	<TextComponent v-else-if="componentModel.type=='text'" :componentModel="componentModel" ref="fieldComponent">
	</TextComponent>
	<NumberComponent v-else-if="componentModel.type=='number'" :componentModel="componentModel" ref="fieldComponent">
	</NumberComponent>
	<SelectComponent v-else-if="componentModel.type=='select'" :componentModel="componentModel" :options="options" ref="fieldComponent">
	</SelectComponent>
	<AttributeSetInstanceComponent v-else-if="componentModel.type=='search' && componentModel.dataField=='product_attribute_set_instance_id'" :componentModel="componentModel">
	</AttributeSetInstanceComponent>
	<SearchComponent v-else-if="componentModel.type=='search'" :componentModel="componentModel" ref="fieldComponent">
	</SearchComponent>
	<DatetimeComponent v-else-if="componentModel.type=='datetime'" :componentModel="componentModel" ref="fieldComponent">
	</DatetimeComponent>
	<DateComponent v-else-if="componentModel.type=='date'" :componentModel="componentModel" ref="fieldComponent">
	</DateComponent>
	<TimeComponent v-else-if="componentModel.type=='time'" :componentModel="componentModel" ref="fieldComponent">
	</TimeComponent>
	<ImageComponent v-else-if="componentModel.type=='image'" :componentModel="componentModel">
	</ImageComponent>
	<ButtonComponent v-else-if="componentModel.type=='button'" :componentModel="componentModel">
	</ButtonComponent>
	<RowComponent v-else-if="componentModel.type=='row'" :componentModel="componentModel">
		<ComponentFactory :componentModel="childComponentModel" v-for="(childComponentModel) in componentModel.children"
			:key="childComponentModel.id">
		</ComponentFactory>
	</RowComponent>
	<ColComponent v-else-if="componentModel.type=='col'" :componentModel="componentModel">
		<ComponentFactory :componentModel="childComponentModel" v-for="(childComponentModel) in componentModel.children"
			:key="childComponentModel.id">
		</ComponentFactory>
	</ColComponent>
	<TextareaComponent v-else-if="componentModel.type=='textarea'" :componentModel="componentModel">
	</TextareaComponent>
	<el-tabs :tab-position="'top'" style="min-height: 200px;width: 100%;" v-else-if="componentModel.type=='tabcontrol'" v-model="activeName">
		<el-tab-pane :componentModel="childComponentModel" :label="childComponentModel.label"
			v-for="(childComponentModel) in componentModel.children" :key="childComponentModel.id"
			:name="childComponentModel.id">
			<ComponentFactory :componentModel="childChildComponentModel"
				v-for="(childChildComponentModel) in childComponentModel.children" :key="childChildComponentModel.id">
			</ComponentFactory>
		</el-tab-pane>
	</el-tabs>
	<HiddenComponent v-else-if="componentModel.type=='hidden'" :componentModel="componentModel">
	</HiddenComponent>
	<EditableTableComponent v-else-if="componentModel.type=='table' && componentModel.editable==true" :componentModel="componentModel">
	</EditableTableComponent>
	<TableComponent v-else-if="componentModel.type=='table'" :componentModel="componentModel">
	</TableComponent>
	<DivComponent v-else-if="componentModel.type=='div'" :componentModel="componentModel">
		<ComponentFactory :componentModel="childComponentModel" v-for="(childComponentModel) in componentModel.children"
			:key="childComponentModel.id">
		</ComponentFactory>
	</DivComponent>
	<GroupTitleComponent v-else-if="componentModel.type=='grouptitle'" :componentModel="componentModel">
	</GroupTitleComponent>
	<CheckboxComponent v-else-if="componentModel.type=='checkbox'" :componentModel="componentModel" ref="fieldComponent">
	</CheckboxComponent>
	<VBarChartComponent v-else-if="componentModel.type=='vbarchart'" :componentModel="componentModel">
	</VBarChartComponent>
	<HBarChartComponent v-else-if="componentModel.type=='hbarchart'" :componentModel="componentModel">
	</HBarChartComponent>
	<PieChartComponent v-else-if="componentModel.type=='piechart'" :componentModel="componentModel">
	</PieChartComponent>
	<LineChartComponent v-else-if="componentModel.type=='linechart'" :componentModel="componentModel">
	</LineChartComponent>
	<GaugeComponent v-else-if="componentModel.type=='gauge'" :componentModel="componentModel">
	</GaugeComponent>
	<TreeComponent v-else-if="componentModel.type=='tree'" :componentModel="componentModel">
	</TreeComponent>
	<FormulaComponent v-else-if="componentModel.type=='formula'" :componentModel="componentModel" ref="fieldComponent">
	</FormulaComponent>
	<RollUpSummaryComponent v-else-if="componentModel.type=='rollupsummary'" :componentModel="componentModel" ref="fieldComponent">
	</RollUpSummaryComponent>
	<WorkflowStepsComponent v-else-if="componentModel.type=='workflowsteps'" :componentModel="componentModel">
		
	</WorkflowStepsComponent>
	<LinkRecordComponent v-else-if="componentModel.type=='linkrecord'" :componentModel="componentModel">
		
	</LinkRecordComponent>
	<WebSocketComponent v-else-if="componentModel.type=='websocket'" :componentModel="componentModel">
		
	</WebSocketComponent>
	<UReport2Component v-else-if="componentModel.type=='ureport2'" :componentModel="componentModel">
		
	</UReport2Component>
	<ShortcutMenuComponent v-else-if="componentModel.type=='shortcutmenu'" :componentModel="componentModel">
		
	</ShortcutMenuComponent>
	<DashboardPageComponent v-else-if="componentModel.type=='dashboardpage'" :componentModel="componentModel">
		
	</DashboardPageComponent>
	<RadioListComponent v-else-if="componentModel.type=='radiolist'" :componentModel="componentModel">
		
	</RadioListComponent>
	<CheckboxListComponent v-else-if="componentModel.type=='checkboxlist'" :componentModel="componentModel">
		
	</CheckboxListComponent>
	<ColorComponent v-else-if="componentModel.type=='color'" :componentModel="componentModel">
		
	</ColorComponent>
	<TitleComponent v-else-if="componentModel.type=='title'" :componentModel="componentModel">
		
	</TitleComponent>
	<DetailReportComponent v-else-if="componentModel.type=='detailreport'" :componentModel="componentModel">
		
	</DetailReportComponent>
	<IndicatorTableComponent v-else-if="componentModel.type=='indicatortable'" :componentModel="componentModel">
		
	</IndicatorTableComponent>
	<SummaryReportComponent v-else-if="componentModel.type=='summaryreport'" :componentModel="componentModel">
		
	</SummaryReportComponent>
</template>

<script>
	import LabelComponent from './LabelComponent.vue';
	import TextComponent from './TextComponent.vue';
	import NumberComponent from './NumberComponent.vue';
	import SelectComponent from './SelectComponent.vue';
	import SearchComponent from './SearchComponent.vue';
	import DatetimeComponent from './DatetimeComponent.vue';
	import DateComponent from './DateComponent.vue';
	import TimeComponent from './TimeComponent.vue';
	import ImageComponent from './ImageComponent.vue';
	import ButtonComponent from './ButtonComponent.vue';
	import RowComponent from './RowComponent.vue';
	import ColComponent from './ColComponent.vue';
	import TextareaComponent from './TextareaComponent.vue';
	import HiddenComponent from './HiddenComponent.vue';
	import TableComponent from './TableComponent.vue';
	import EditableTableComponent from './EditableTableComponent.vue';
	import DivComponent from './DivComponent.vue';
	import GroupTitleComponent from './GroupTitleComponent.vue';
	import CheckboxComponent from './CheckboxComponent.vue';
	import VBarChartComponent from './VBarChartComponent.vue';
	import HBarChartComponent from './HBarChartComponent.vue';
	import PieChartComponent from './PieChartComponent.vue';
	import LineChartComponent from './LineChartComponent.vue';
	import GaugeComponent from './GaugeComponent.vue';
	import TreeComponent from './TreeComponent.vue';
	import AttributeSetInstanceComponent from './AttributeSetInstanceComponent.vue';
	import FormulaComponent from './FormulaComponent.vue';
	import RollUpSummaryComponent from './RollUpSummaryComponent.vue';
	import WorkflowStepsComponent from './WorkflowStepsComponent.vue';
	import LinkRecordComponent from './LinkRecordComponent.vue';
	import WebSocketComponent from './WebSocketComponent.vue';
	import UReport2Component from './UReport2Component.vue';
	import ShortcutMenuComponent from './ShortcutMenuComponent.vue';
	import DashboardPageComponent from './DashboardPageComponent.vue';
	import RadioListComponent from './RadioListComponent.vue';
	import CheckboxListComponent from './CheckboxListComponent.vue';
	import ColorComponent from './ColorComponent.vue';
	import TitleComponent from './TitleComponent.vue';
	import DetailReportComponent from './DetailReportComponent.vue';
	import IndicatorTableComponent from './IndicatorTableComponent.vue';
	import SummaryReportComponent from './SummaryReportComponent.vue';
	import utils from '@/utils/utils.js';
	export default {
		name: "ComponentFactory",
		components: {
			LabelComponent,
			TextComponent,
			NumberComponent,
			SelectComponent,
			SearchComponent,
			DatetimeComponent,
			DateComponent,
			TimeComponent,
			ImageComponent,
			ButtonComponent,
			RowComponent,
			ColComponent,
			TextareaComponent,
			HiddenComponent,
			TableComponent,
			EditableTableComponent,
			DivComponent,
			GroupTitleComponent,
			CheckboxComponent,
			VBarChartComponent,
			HBarChartComponent,
			PieChartComponent,
			LineChartComponent,
			GaugeComponent,
			TreeComponent,
			AttributeSetInstanceComponent,
			FormulaComponent,
			RollUpSummaryComponent,
			WorkflowStepsComponent,
			LinkRecordComponent,
			WebSocketComponent,
			UReport2Component,
			ShortcutMenuComponent,
			DashboardPageComponent,
			RadioListComponent,
			CheckboxListComponent,
			ColorComponent,
			TitleComponent,
			DetailReportComponent,
			IndicatorTableComponent,
			SummaryReportComponent
		},
		props: [
			"componentModel","options"
		],data() {
			return {
				activeName:"",
			}
		},inject:['children']
		,mounted() {
			this.children.push(this);
			if(this.componentModel.type=="tabcontrol"){
				this.activeName=this.componentModel.children[0].id;
			}
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},methods: {
			getValue() {
				var ref=this.$refs.fieldComponent;
				if(ref!=undefined){
					return ref.getValue();
				}
			}
		},
	}
</script>

<style>
</style>
